<template>
    <div>
        <Card>
            <p slot="title">
                个人认证审核
            </p>
            <div>
                <Form class="step-form" ref="userData" :model="userData" :rules="userDataRules" :label-width="100">
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="用户名称：" prop="loginName" label-position="left" :label-width="150">
                                <Input  :disabled="hasSubmit" v-model="userData.loginName" type="text" placeholder="输入数据不能为空" />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="真实姓名：" prop="realName" label-position="left" :label-width="150">
                                <Input :disabled="hasSubmit" v-model="userData.realName" type="text" placeholder="输入数据不能为空" />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="手机号：" prop="mobile" label-position="left" :label-width="150">
                                <Input :disabled="hasSubmit" v-model="userData.mobile" type="text" placeholder="手机号不能为空" />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="身份证号：" prop="cardNum" label-position="left" :label-width="150">
                                <Input :disabled="hasSubmit" v-model="userData.cardNum" type="text" placeholder="身份证号不能为空" />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="10">
                            <FormItem label="身份证图片：" prop="cardUrl" label-position="left" :label-width="150">
                                <img v-if="userData.cardUrl !== ''" :src="userData.cardUrl" height="200" width="200">
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="10">
                            <FormItem label="名片图片：" prop="businessCardUrl" label-position="left" :label-width="150">
                                <img v-if="userData.businessCardUrl !== ''" :src="userData.businessCardUrl" height="200" width="200">
                            </FormItem>
                        </i-col>
                    </Row>
                    <FormItem >
                        <Button @click="back" style="width:150px;" >返回</Button>
                    </FormItem>
                </Form>
            </div>
        </Card>
    </div>
</template>

<script>
import ajax from '../../../libs/axios.js'
export default {
    name: 'addUser',
    data () {
        return {
            modal1:false,
            testModelShow:false,
            symptomList:[],
            selectModel:[],
            userData: {
                id:'',
                loginName:'',
                password:'',
                realName:'',
                cardUrl: '',
                businessCardUrl:'',
                mobile:'',
                cardNum:''
            },
            userDataRules: {
                loginName: [
                    { required: true, message: '请输入用户名称', trigger: 'blur'},
                    {type: 'string', max: 15, message: '不能超过15个字符', trigger: 'blur'}
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur'},
                    {type: 'string', max: 15, message: '不能超过15个字符', trigger: 'blur'}
                ],
                password1: [
                    { required: true, message: '请输入确认密码', trigger: 'blur'},
                    {type: 'string', max: 15, message: '不能超过15个字符', trigger: 'blur'}
                ],
                realName: [
                    { required: true, message: '请输入真实姓名', trigger: 'blur'},
                    {type: 'string', max: 15, message: '不能超过5个字符', trigger: 'blur'}
                ],
                mobile: [
                    { required: true, message: '请输入手机号码', trigger: 'blur'}
                ],
                cardNum: [
                    { required: true, message: '请输入真实姓名', trigger: 'blur'},
                    {type: 'string', max: 15, message: '不能超过15个字符', trigger: 'blur'}
                ]
                // 暂时不进行验证
                // cardUrl: [
                //     { required: true, message: '请上传疾病图片', trigger: 'blur'},
                // ],
                // businessCardUrl: [
                //     { required: true, message: '请上传疾病图片', trigger: 'blur'},
                // ]

            },
            hasSubmit: true,
            // 图片上传
            file: null,
            status: 'wait',
            uploadLoading: false, // 上传图片时候的加载效果,
            failreason:"",//审核失败
        }
    },
    methods: {
        // 数据初始化
        init () {
            this.$store.commit('setActiveName', 'personalindex');
            let id = this.$route.params.id;
            this.personalInfo(id);
        },
        // 获取数据
        personalInfo(id){
            let _that = this;
            let url = 'adminlogin/getCjUserById'
            let data = {
                id: id
            }
            ajax.formRes(url, data).then(res => {
                // success
                if(200 == res.code){
                    _that.userData = res.data;
                }else{
                    _that.$Message.success('数据原因，请联系管理员。')
                }

            }).catch(res => {
                console.log('有错误信息')
                // fail
            })
        },
        //返回至首页
        back(){
            this.$router.push({
                name: 'personalindex'
            })
        }

    },
    created: function () {
        this.init()
    },
    activated: function () {
        // this.init()
    }
}
</script>
<style>
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .card-upload:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
</style>

